<template>
  <div class="dialog-email">
    <el-dialog :visible.sync="dialogVisible" width="500px"
               title="查看邮箱" center>
      <div class="content">
        <ul>
          <li><span><b>邮箱：</b>{{info.emailAddr}}</span></li>
          <li><span><b>邮箱授权码：</b>******</span>
            <el-button :loading="loading" type="text" :class="frag?'success':'error'">{{frag?'正常':'异常'}}</el-button>
          </li>
          <li><span><b>协议类型：</b>{{filter(info.protocolType)}}</span></li>
          <li><span><b>收邮件服务器：</b>{{info.Imap4Server?info.Imap4Server:'-'}}{{info.Imap4Port?":"+info.Imap4Port:''}}</span>
            <el-button  :loading="loading" type="text"  :class="frag?'success':'error'">{{frag?'正常':'异常'}}</el-button>
          </li>
          <li><span><b>发邮件服务器：</b>{{info.Server?info.Server:'-'}}{{info.ServerPort?":"+info.ServerPort:''}}</span>
            <el-button  :loading="loading" type="text"  :class="frag?'success':'error'">{{frag?'正常':'异常'}}</el-button>
          </li>
        </ul>
        <p v-show="errorInfo&&!frag" class="error" v-html="errorInfo"></p>
      </div>
      <div slot="footer" class="dialog-footer" align="right">
        <el-button  size="mini" @click="dialogVisible=false">关 闭</el-button>
        <el-button type="primary" size="mini" @click="checkEmail" title="检测邮箱状态" :loading="loading">{{loading?'检测中...':'检 测'}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {checkEmail} from "@/api/mail/admin/mail-set";
    export default {
        name: "DialogEmail",
        data() {
            return {
                dialogVisible: false,
                info: {},
                frag:true,
                loading:false,
                errorInfo:''
            }
        },
        methods: {
            checkEmail(){
                if(this.loading)return;
                this.loading=true;
                checkEmail(this.info.emailAddr).then(res=>{
                    this.loading=false;
                    if(res.data.success){
                        this.errorInfo = res.data.data;
                        this.frag = JSON.stringify(this.errorInfo)=='{}';
                    }
                }).catch(err=>{ this.loading=false;})
            },
            init(email) {
                this.errorInfo = '';
                this.info = email;
                this.frag =  this.info.bindState==0;
                this.dialogVisible = true;
            },
            filter(type){
                switch (parseInt(type)) {
                    case 0:
                        return 'IMAP';
                    case 1:
                        return 'POP3';
                    case 2:
                        return 'Exchange';
                    default:
                        return 'IMAP'
                }
            }
        }
    }
</script>

<style scoped lang="scss">
  .dialog-email {
    .content {
      width: 400px;
      margin: 0 auto;
      li{
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #232323;
        font-size: 14px;
        height: 30px;
        b{
          display: inline-block;
          width: 130px;
          font-weight: normal;
        }
        .el-button.success{
          color: #00CC00;
        }
        .el-button.error{
          color: red;
        }
      }
      p.error{
        color: red;
        margin-top: 15px;
        line-height: 25px;
      }
      .success{
        margin-top: 0;
      }
    }
  }
</style>
